<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>订单信息管理系统</title>

    <style type="text/css">

        td,th{
            text-align: center;
        }

        body
            {
                background-color:white;
            }
        span
            {
                float: left;
                margin-left: 10px;
                margin-top: 14px;
                width: 180px;
                height: 400px;
                border: 1px solid blue;
            }
        a:link
            {
                color:black;
                font-size: 30px;
                font-family: Arial;
            }
        a:hover
            {
                color: red;
            }
        a
            {
                margin-left: 20px;
            }
        .first
            {
                    width: 1200px;
                    height: 500px;
                    border: 1px solid red;
                    margin-left: 200px;
                    margin-top: 14px;
                    padding-left: 20px;
            }
        p
            {
                color: navy;
                font-size: 25px;
                font-family: Arial;
            }
    </style>

    <script>

        function fun(){
            alert("确定删除此条记录？");
        }

        function ischeck(){
         var statue = document.getElementById("uid");
             if(statue.checked){
                  alert("是否确定删除?");
              }else{
                  alert("请选中记录再删除!");
              }
          }

    </script>

</head>

<body>
    <div style="position: relative"> 
        <img src="2.jpg" height="100px" width="1200px">
       <div style="position: absolute;z-index: 2;left:550px;top: 30px;font-family: Arial;font-size: xx-large;color: white;">超市订单管理系统</div>
    </div>
    <div>

        <span>
            <br><br><a href="manage.html">订单管理</a><br><br><br><br>
            <a href="input.html">订单信息录入</a><br><br><br><br>
            <a href="modify.html">订单信息修改</a><br><br><br><br>
            <a href="history.html">全部订单</a><br>
        </span>
    </div>

<div class="first">

<div class="container">

    <h1 align="center">订单管理</h1>



    <br><div style="text-align: center;">
        <a class="btn btn-primary" onclick="window.location.href = 'input.html'">添加</a>
        <a class="btn btn-danger" id="delSelected" onclick="ischeck();">批量删除</a>
    </div><br>

    <form id="form" method="post" action="input.html">
        <table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <td><input type="checkbox" id="check">全选</td>
                <th>订单ID</th>
                <th>订单名字</th>
                <th>价格</th>
                <th>时间</th>
                <th>订单状态</th>
                <th>操作</th>
            </tr>

                <body id="tb">

                <tr id="1st">
                    <td><input type="checkbox" name="uid" id="uid"></td>
                    <td>2020001</td>
                    <td>sweater</td>
                    <td>11</td>
                    <td>20200801</td>
                    <td>Y</td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="window.location.href = 'modify.html'">修改</button>
                        <button type="button" class="btn btn-danger" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</button>
                    </td>
                </tr>

                <tr>
                    <td><input type="checkbox" name="uid" id="uid"></td>
                    <td>2021001</td>
                    <td>Tom</td>
                    <td>12</td>
                    <td>20210801</td>
                    <td>Y</td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="window.location.href = 'modify.html'">修改</button>
                        <button type="button" class="btn btn-danger" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</button>
                    </td>
                </tr>

                </body>
        </table>
    </form>
 
    <div align="center">

            <ul class="pagination">
                <li>
                    <a href="#">
                        &laquo;
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#">
                        &raquo;
                    </a>
                </li>
                <br>
                <br>
                <button class="btn  btn-info" type="submit">首页</button>
                
                <button class="btn  btn-info" type="submit">上页</button>
                
                <button class="btn  btn-info" type="submit">下页</button>
                
                <button class="btn  btn-info" type="submit">尾页</button>
                <br>
                <a style="font-size: 22px;margin-left:20px" >
                    共35条记录,共5页
                </a>
            </ul>
    </div>
</div>

</div>

</body>

    <script>
         document.getElementById("check").onclick = function(){
        var checked = document.getElementById("check").checked;
        var checkson = document.getElementsByName("uid");
        if(checked){
            for(var i = 0; i < checkson.length ;i++){
                checkson[i].checked = true;
            }
        }else{
            for(var i = 0; i < checkson.length ;i++){
                checkson[i].checked = false;
            }
        }
    }

    </script>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        //obj是点击行的this
        function deleteTr(obj) {
            //通过this找到父级元素节点
            var tr = obj.parentNode.parentNode;
            //找到表格
            var tbody = tr.parentNode;
            //删除行
            tbody.removeChild(tr);
            //只剩行首时删除表格
            if (tbody.rows.length == 1) {
                tbody.parentNode.removeChild(tbody);
            }
        }
    </script>

</html>